<template>
  <div class="main-content pd16">

    <!--搜索栏-->
    <el-form class="search-form" ref="searchFormRef" :model="searchForm" :inline="true" label-width="70px">

      <el-form-item label="用户ID" prop="userId" label-width="80px">
        <el-input v-model="searchForm.userId" placeholder="请输入" clearable style="width: 200px"
                  @keyup.enter="searchData"/>
      </el-form-item>

      <el-form-item label="账号" prop="account" label-width="40px">
        <el-input v-model="searchForm.account" placeholder="请输入" clearable style="width: 200px"
                  @keyup.enter="searchData"/>
      </el-form-item>

      <el-form-item label="手机号" prop="phoneMobile" label-width="60px">
        <el-input v-model="searchForm.phoneMobile" placeholder="请输入" clearable style="width: 200px"
                  @keyup.enter="searchData"/>
      </el-form-item>

      <el-form-item label="身份证名" prop="idCardName" label-width="70px">
        <el-input v-model="searchForm.idCardName" placeholder="请输入" clearable style="width: 200px"
                  @keyup.enter="searchData"/>
      </el-form-item>

      <el-form-item label="审批状态" prop="applyStatus" label-width="80px">
        <el-select v-model="searchForm.applyStatus" placeholder="请选择" clearable style="width: 100px">
          <el-option v-for="dict in enu_room_apply_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="身份证名" prop="idCardName" label-width="70px">
        <el-input v-model="searchForm.idCardName" placeholder="请输入" clearable style="width: 200px"
                  @keyup.enter="searchData"/>
      </el-form-item>

      <el-form-item label="申请时间" prop="time1" label-width="70px">
        <el-date-picker
            v-model="searchForm.time1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="审批时间" prop="time2" label-width="70px">
        <el-date-picker
            v-model="searchForm.time2"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="searchData">搜索</el-button>
        <el-button icon="Refresh" @click="resetSearch">重置</el-button>
      </el-form-item>

    </el-form>

    <!--按钮组-->

    <!--表格-->
    <el-table border highlight-current-row row-key="id" v-loading="option.loading" :data="option.tableData"
              @selection-change="selectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column label="ID" prop="userId" :show-overflow-tooltip="true" width="80"></el-table-column>
      <el-table-column label="账号" prop="account" :show-overflow-tooltip="true" width="150"></el-table-column>
      <el-table-column label="手机号" prop="phoneMobile" :show-overflow-tooltip="true" width="150"></el-table-column>
      <el-table-column label="身份证姓名" prop="idCardName" :show-overflow-tooltip="true" width="100"></el-table-column>
      <el-table-column label="身份证号" prop="idCardNumber" :show-overflow-tooltip="true" width="100"></el-table-column>
      <el-table-column label="申请描述" :show-overflow-tooltip="true" prop="applyMsg" width="170"></el-table-column>
      <el-table-column label="申请时间" prop="ct" width="170"></el-table-column>
      <el-table-column label="最多观众" :show-overflow-tooltip="true" prop="userMaxCount" width="120"></el-table-column>
      <el-table-column label="会议时长" prop="applyCloseTime" :show-overflow-tooltip="true" width="170">
        <template #default="scope">
          {{ scope.row.applyCloseTime }} 小时
        </template>
      </el-table-column>
      <el-table-column label="审批状态" align="center" prop="applyStatus" :show-overflow-tooltip="true" width="100">
        <template #default="scope">
          <dict-tag :options="enu_room_apply_status" :value="scope.row.applyStatus"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column label="审批时间" prop="ut" width="170"></el-table-column>
      <el-table-column label="审批描述" :show-overflow-tooltip="true" prop="processMsg" width="170"></el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
        <template #default="scope">
          <el-button v-if="scope.row.applyStatus === '0'" link type="primary" icon="Edit" @click="openEdit(scope.row)"
                     v-has-key="['room_apply']">
            审批
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="fx_end">
      <el-pagination
          class="mgt8"
          small
          background
          :total="option.totalRow"
          :page-sizes="option.pageSizes"
          v-model:current-page="searchForm.pageNumber"
          v-model:page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="searchData"
          @current-change="searchData"
      />
    </div>

    <!--Dialog-->
    <el-dialog :title="option.dialogTitle" v-model="option.openDialog" width="680px" :close-on-click-modal="false"
               draggable append-to-body destroy-on-close>

      <el-form ref="formDataRef" size="default" :model="formData" :rules="formRules" label-width="150px">

        <el-form-item label="会议时长" prop="applyCloseTime">
          <el-select v-model="formData.applyCloseTime" placeholder="请选择" clearable style="width: 100px">
            <el-option v-for="dict in enu_room_apply_close_time_manage" :key="dict.value" :label="dict.label"
                       :value="dict.value"/>
          </el-select>
        </el-form-item>

        <el-form-item label="审批状态" prop="applyStatus">
          <el-select v-model="formData.applyStatus" placeholder="请选择" clearable style="width: 100px">
            <el-option v-for="dict in enu_room_apply_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
          </el-select>
        </el-form-item>

        <el-form-item label="最多观众数" prop="userMaxCount">
          <el-input
              v-model="formData.userMaxCount"
              maxlength="4"
              placeholder="请输入"
              style="width: 400px"
              type="number"/>
        </el-form-item>
        <el-form-item label="审批备注" prop="processMsg">
          <el-input
              v-model="formData.processMsg"
              maxlength="500"
              placeholder="请输入"
              show-word-limit
              :rows="2"
              style="width: 400px"
              type="textarea"/>
        </el-form-item>

      </el-form>

      <template #footer>
        <el-button @click="()=>{option.openDialog=false}">取 消</el-button>
        <el-button type="primary" @click="submitEdit">保 存</el-button>
      </template>

    </el-dialog>


  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, ref} from "vue";
import {approveRoomApply, roomApplyPage} from "@/common/api/mt";
import $modal from "@/common/utils/modal";
import {copyNew} from "@/common/utils/kit";
import DictTag from "@/common/component/DictTag.vue";
import {asDict} from "@/common/api/common";

const {proxy} = getCurrentInstance();
const {enu_room_apply_status, enu_room_apply_close_time_manage} = asDict("enu_room_apply_status", "enu_room_apply_close_time_manage");

let optionKey = {
  loading: false,
  dialogType: "",
  dialogTitle: "",
  openDialog: false,
  tableData: [],
  selectIds: [],
  selectNames: [],
  pageSizes: [1, 10, 20, 50, 100],
  totalRow: 0,
  nowRoleId: 0,
  defaultChecked: [],
  allRole: [],
}

let searchKey = {
  pageNumber: 1,
  pageSize: 10,
  userId: "",
  account: "",
  phoneMobile: "",
  idCardName: "",
  applyStatus: "",
  time1: "",
  time2: "",
}
let formKey = {
  id: "",
  applyStatus: "",
  applyCloseTime: "",
  processMsg: "",
  userMaxCount: "",
}
const formRules = ref({
  applyStatus: [{required: true, message: "不能为空", trigger: "change"}],
  applyCloseTime: [{required: true, message: "不能为空", trigger: "blur"}],
  processMsg: [{required: true, message: "不能为空", trigger: "blur"}],
  userMaxCount: [{required: true, message: "不能为空", trigger: "blur"}],
});

const searchForm = ref(searchKey)
const formData = ref(formKey);
const option = ref(optionKey);

function resetForm() {
  formData.value = copyNew(formKey);
}

function resetSearch() {
  proxy.$refs["searchFormRef"].resetFields();
  searchData()
}

//页面加载完成回调
onMounted(() => {
  searchData()
})

function selectionChange(rows) {
  option.value.selectIds = rows.map(item => item.id);
  option.value.selectNames = rows.map(item => item.account);
}

//搜索数据
function searchData() {
  option.value.loading = true;
  roomApplyPage(searchForm.value).then(res => {
    let {totalRow, records, pageNumber, pageSize} = res.data;
    option.value.loading = false;
    option.value.totalRow = totalRow * 1
    option.value.tableData = records
    searchForm.value.pageNumber = pageNumber
    searchForm.value.pageSize = pageSize
  })
}


function openEdit(row) {
  //console.log(row)
  option.value.dialogTitle = "审批会议资格申请";
  option.value.openDialog = true;
  option.value.dialogType = "edit";
  formData.value = copyNew(row);
}


function submitEdit() {
  proxy.$refs["formDataRef"].validate(valid => {

    if (valid) {
      approveRoomApply(formData.value).then(res => {
        if (res.success) {
          //console.log(res)
          $modal.success();
          option.value.openDialog = false;
          searchData()
        }
      })
    }

  });
}


</script>

<style scoped lang="less">

</style>